<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
    </el-breadcrumb>
    <template v-if="userlist">
      <div class="margintop20">
        <el-button type="primary" @click="dialogVisible = true">新增学科项目</el-button>

        <el-dialog
          title="新增校区"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form label-position="top" label-width="80px" :model="form" >
            <el-form-item label="项目学科" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="region">
              <el-input v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="xiangmunum">
              <el-input v-model="form.xiangmunum"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">暂不添加</el-button>
            <el-button type="primary" @click="addtosome">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <el-row>
        <el-col>
          <el-table
            style="width:80%"
            class="tableinfo margintop20"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            :data="userlist"
            stripe
          >
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="学科编号" prop="name"></el-table-column>
            <el-table-column label="项目名字" prop="region"></el-table-column>
            <el-table-column label="项目编码" prop="xiangmunum"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" class="caozuo" @click="delxiangmu(scope.row)">
                  <p>删除</p>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
import { addxkxiangmu, getxkxiangmulist,delxuekexiangmu } from "@/api";
import Vue from "vue";
export default {
  name: "userlist",
  data() {
    return {
      userlist: [],
      dialogVisible: false,
      form: {},
    };
  },
  methods: {
    delxiangmu(row){
      var roleid = sessionStorage.getItem("roleid")
      delxuekexiangmu({
        _id:row._id
      })
      .then(res=>{
         if(res.type){
                    this.userlist=this.userlist.filter(item=>item._id!==row._id)
                }
      })
      .catch(err=>{
        
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    addtosome() {
      //   this.form.category = this.form.category.join(",")
      addxkxiangmu(this.form)
        .then((res) => {
          this.dialogVisible = false;
          // this.$router.push({name:"xiaoqu"})        //     //   console.log(666)
        //     //   console.log(item._id)
            
        //          console.log(this.form)
        //     if (item._id == this.form._id) {
              
        //       Vue.set(this.userlist, i, this.form);
        //     }
        //   });
      
                getxkxiangmulist().then(res=>{
                    this.userlist = res.result
                })

        })
       
    },
  },
  mounted() {
    // console.log(this.form)
    getxkxiangmulist()
      .then((res) => {
        if (res.type) {
          console.log(123);
         
          this.userlist = res.result;
        
        }
      })
      .catch((err) => {});
  },
};
</script>